<template>
    <div class="main">
        <div class="div1">查看</div>
        <div class="div2">
            <h3>啦啦啦啦</h3>
            <p>发送：二狗子</p>
            <p>接收：李四</p>
            <p class="time">2022/2/11 15:30:12</p>
        </div>
        <div class="div3">快点解封恢复很快</div>
        <div class="div4">
            <div>
                <el-button icon="el-icon-arrow-left" @click="fanHui()">返回</el-button>
            </div>
            <div>
                <el-button class="btn" icon="el-icon-printer">打印</el-button>
                <el-button type="primary" class="btn" icon="el-icon-top-left">回复</el-button>
                <el-button type="primary" class="btn" icon="el-icon-top-right">转发</el-button>
            </div>
        </div>
    </div>
</template>
<script>
export default {
// eslint-disable-next-line vue/multi-word-component-names
name:"",
components:{},
data(){
    return {

    }
    },
    methods:{
        // 点击查看中的返回按钮，返回上一页
        fanHui(){
             this.$router.go(-1);
        }
    }
       
}
</script>
<style lang="less" scoped>
.main{
    background-color: white;
    padding: 10px 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}
.div1{
    font-size: 18px;
    padding-bottom: 10px;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(161, 158, 158, 0.452);
}
.div2{
    padding: 10px;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(161, 158, 158, 0.452);
}
.div2 p{
    color: #999;
    font-size: 13px;
}
.time{
    text-align: right;
}
.div3{
    padding: 20px 10px;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(161, 158, 158, 0.452);
}
.div4{
    padding-top: 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

</style>